<template>
  <div>
    <!-- <h2>给当前用户添加角色</h2>
    <br>
    <a-checkbox @change="onChange" v-for="i in roles" :key="i.id">
      {{i.name}}

    </a-checkbox>
    <br><br>
    <button @click="sub()">添加</button> -->
  </div>

</template>




<template>
    <div>

   <h1>给当前用户添加角色</h1>
   <!-- <table>
     <tr>
       <td v-model="rid" multiple>
         <a-checkbox @change="onChange" v-for="i in type_list" :key="i.id">
        {{i.name}}

    </a-checkbox>
       </td>
     </tr>
   </table> -->

        <select v-model="rid" multiple>
            <option v-for="item in type_list" :key="item.id" :value="item.id">{{item.name}}</option>
        </select>
        <!-- <div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }"> -->
        <br><br>
        <a-button type="primary" ghost @click="add_per">
      添加
    </a-button>
  </div>
    </div>
</template>


<script>
import axios from 'axios'
export default {
    data() {
        return {
            rid: [],
            type_list: []
        }
    },
    methods: {
        onChange(e) {
            console.log(`checked = ${e.target.checked}`);
        },
        add_per(){
            axios.post('http://127.0.0.1:8000/user/user_role/', {'uid': localStorage.getItem('uid'), 'rid': this.rid}).then(res=>{
                console.log(res.data)
                alert('添加成功')
            })
        },
        get_type(){
            axios.get('http://127.0.0.1:8000/user/role/').then(res=>{
                console.log(res.data)
                this.type_list=res.data
            })
        }
    },
    created() {
        this.get_type()
    }
}
</script>


<style scoped>


</style>
